<template>
  <div class="handsontable-container">
    <div class="search-container">
      <a-input
        style="width: 200px"
        allow-clear
        v-model="keyValue"
      ></a-input>
      <a-button @click="search">查询</a-button>
      <a-button @click="exportFile" type="primary">导出</a-button>
    </div>
    <hot-table :settings="hotSettings" ref="hotTable">
      <hot-column
        v-for="(item, index) in column"
        :key="index"
        :data="item.data"
        :title="item.label"
        :width="item.width"
        :read-only="item.readOnly"
        :type="item.type"
      ></hot-column>
    </hot-table>
  </div>
</template>
<script>
import { HotTable, HotColumn } from '@handsontable/vue'
import 'handsontable/dist/handsontable.min.css'
import { downloadUrl } from '@/libs/js/common'
import 'pikaday/pikaday.js'
import 'pikaday/css/pikaday.css'
export default {
  components: {
    HotTable,
    HotColumn
  },
  methods: {
    // 导出
    exportFile () {
      let _this = this
      let exportFile = this.hot.getPlugin('exportFile')
      let exportedBlob = exportFile.exportAsBlob('csv', {
        bom: false,
        columnHeaders: true,
        filename: _this.gridName
      })
      downloadUrl(exportedBlob, _this.gridName, 'csv')
    },
    // 查找
    search () {
      let search = this.hot.getPlugin('search')
      // eslint-disable-next-line no-unused-vars
      let queryResult = search.query(this.keyValue)
      this.hot.render()
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.hot = this.$refs['hotTable'].hotInstance
    })
  },
  data () {
    return {
      gridName: 'mis-demo',
      hot: null, // 当前表格的实例
      keyValue: '', // 查找的关键字
      hotSettings: {
        data: [
          {
            code: '1111',
            name: '电商商品',
            prop: '商品属性',
            price: 8,
            num: '10',
            sub: '80',
            inv: '1000',
            act: '测试数据',
            date: '05/01/2021',
            total: '80'
          }
        ],
        rowHeaders: true, // 行序号
        headerTooltips: {
          className: 'htCenter htMiddle'
        },
        manualColumnResize: true,
        manualColumnMove: true, // 列移动
        manualRowResize: true, // 行列尺寸可拉伸
        fixedRowsTop: 0,
        wordWrap: true,
        width: '100%',
        height: '100%',
        stretchH: 'all', // 平铺
        columnSorting: true, // 排序
        search: true, // 开启搜索功能
        filters: true, // 开启筛选功能
        dropdownMenu: ['filter_by_condition', 'filter_action_bar'],
        mergeCells: true, // 合并单元格
        className: 'htCenter htMiddle', // 设置居中
        contextMenu: {
          items: {
            'remove_row': { name: '删除行' },
            'copy': { name: '复制' },
            'cut': { name: '剪切' },
            'mergeCells': { name: '合并单元格' }
          }
        },
        rowHeights: 36
      },
      column: [
        {
          data: 'code',
          label: '电商商品代码',
          readOnly: true
        },
        {
          data: 'name',
          label: '电商商品名称'
        },
        {
          data: 'prop',
          label: '电商商品属性'
        },
        {
          data: 'price',
          label: '单价',
          type: 'numeric'
        },
        {
          data: 'num',
          label: '数量'
        },
        {
          data: 'sub',
          label: '小计'
        },
        {
          data: 'inv',
          label: '总部库存数'
        },
        {
          data: 'act',
          label: '活动信息'
        },
        {
          data: 'date',
          label: '发货日期',
          type: 'date',
          dateFormat: 'MM/DD/YYYY',
          correctFormat: true,
          defaultDate: '04/01/2021',
          // datePicker additional options (see https://github.com/dbushell/Pikaday#configuration)
          datePickerConfig: {
            // First day of the week (0: Sunday, 1: Monday, etc)
            firstDay: 0,
            showWeekNumber: true,
            numberOfMonths: 1,
            disableDayFn: function (date) {
              // Disable Sunday and Saturday
              return date.getDay() === 0 || date.getDay() === 6
            }
          }
        },
        {
          data: 'total',
          label: '总预订数量'
        }
      ]
    }
  }
}
</script>
<style lang="scss">

.handsontable-container {
  position: relative;
  overflow: auto;
  width: 100%;
  height: 100%;
  padding-top: 36px;
  .search-container {
    position: absolute;
    right: 0;
    top: 0px;
    text-align: right;
  }
}
</style>
